<template>
  <h1>count:{{ num }}---{{ doubleNum }}</h1>
  <button @click="increment">increment</button>
  <button @click="incrementN(2)">incrementN</button>

</template>

<script lang="ts">
 import { defineComponent } from 'vue'
  export default  defineComponent({
    name:'Count'
  })
</script>
<script lang="ts" setup>
import { storeToRefs } from 'pinia';
// 1.引入pinia中的某个模块暴露的方法
  import useCountState from '@/store/count';
// 2.调用pinia模块中暴露的方法,得到一个对象
  const countState = useCountState()
// pinia中数据的对象是一个代理对象,内部可以直接拿到数据,是ref对象格式的
  console.log(countState);
// 3.解构pinia模块内部的数据,如果直接解构得到的不是ref对象,需要使用storeToRef方法解构
  const{ num,doubleNum } = storeToRefs(countState)
// 4.解构出来皮年仓库中的方法
    const{increment,incrementN} = countState
</script>

<style lang="scss" scoped>
  
</style>